<!--开卡员端开卡记录-->
<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">领卡员端</el-breadcrumb-item>
    <el-breadcrumb-item>已绑定未下单会员卡</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="card_search">
    <el-input
      v-model="queryInfo.cardAccount"
      class="search"
      size="large"
      placeholder="Search..."
      @blur="getCardInfo"
	  @keyup.enter='getCardInfo'
  />
    <img src="@/assets/imgs/home/search.png" alt="" @click="getCardInfo" style="width: 0.4rem; background-color: rgb(57,62,74); cursor: pointer;">
  </div>

  <el-table :data="cardList"
            class="table"
            :header-cell-style = "headerStyle"
            :cell-style = "cellStyle"
            :key="cardList.id">
    <el-table-column prop="cardAccount" label="卡号" />
	<el-table-column prop="type" label="卡类" />
	<el-table-column    prop="name" label="昵称" />
	<el-table-column prop="contactTelephone" label="手机号" />
	<el-table-column prop="total" label="剩余次数" />
	<el-table-column  prop="activationTime" label="激活时间" />
    <el-table-column prop="openCardTime" label="开卡日期" />
  </el-table>
  <!--  批量激活-->
  
 <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="queryInfo.currentPage"
      :page-size="queryInfo.pageSize"
      class="pagination-container"
  />
</template>

<script setup>
import {reactive, ref, getCurrentInstance, onMounted} from "vue";
import { 
  Pointer, Search
} from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance()
let cardList = reactive([])
const total = ref(0)
const queryInfo = reactive({
  currentPage: 1,
  pageSize: 9,
  cardAccount:'',
  status:'2',
  date:'',
  warn:'first'
})
const handleCurrentChange = val => {
  queryInfo.currentPage = val
  getCardInfo()
}

const headerStyle = () => {
  return {
    'font-size':'20px',
    'color': 'black',
    'text-align': 'center'
  }
}

const cellStyle = () => {
  return {
    'background-color':'rgb(57,62,74)',
    'color': 'white',
    'text-align': 'center'
  }
}

onMounted(() => {
  getCardInfo()
})
// 获取所有卡号
const getCardInfo = async () => {
  const {data: res} = await proxy.$http.CardService.getActiveCardList(queryInfo)
  // console.log(res.data)
  if (res.code == 200){
	  cardList.length = 0
	  for (let i= 0; i < res.data.records.length; i++) {
		  if(res.data.records[i].activationTime){
			  res.data.records[i].activationTime=res.data.records[i].activationTime.substring(0,10)
		  }
		 
	    if (res.data.records[i].status === 0) res.data.records[i].status = '未发出'
		else  if (res.data.records[i].status === -1) res.data.records[i].status = '已冻结'
	   else if (res.data.records[i].status === 1) res.data.records[i].status = '已发出'
	    else if (res.data.records[i].status === 2){
			if(res.data.records[i].warn){
				res.data.records[i].status = '已绑定未下单'
			}else{
				res.data.records[i].status = '正常使用'
			}
			
		} 
	    else if (res.data.records[i].status === 3) res.data.records[i].status = '已失效'
	    // 测试用
	    // res.data.records[i].orderList = [{a: 'DDDDDDDDDDDDDDDDDDD', b:'已送达'}, {a: 'DDDDDDDDDDDDDDDDDDD', b:'已送达'}]
	    cardList.push(res.data.records[i])
	  }
	  total.value = res.data.total
  }else{
	  // return proxy.$message('获取开卡列表失败')
  }
}


</script>

<style scoped lang="scss">
  .search{
    width: 25%;
  }
  .card_search{
    margin-top: 10px;
    display: flex;
    justify-content: right;
  }

  :deep(.el-select .el-input__inner) {
    color: white !important;
  }
  .add-btn {
    height: 40px;
    display: flex;
    margin-right: 50px;
    .el-button {
      font-size: 0.15rem;
      font-weight: bolder;
      background-color: rgb(0,152,131);
      height: 100%;
      color: white;
    }
    .el-button:hover {
      background-color: white;
      color: rgb(0,152,131);
    }
    .el-input-bg-color {
      background-color: red;
    }
    :deep(.el-input__inner) {
      // background-color: rgb(0,152,131);
      &::placeholder{
        color: white;
        font-weight: bolder;
        font-size: 16px
      }
    }
    :deep(.el-select .el-input .el-select__caret) {
      color: white;
    }
  }
  :deep(.el-table__body .el-button:hover){
    color: rgb(57,62,74);
    background-color: white !important;
  }
  :deep(.el-table__body .el-table__expand-icon){
    color: white;
  }
  .search_date {
    display: flex;
    margin-right: 50px;
  }
  :deep(.search .el-input__wrapper) {
    background-color: rgb(0,152,131);
  }

  :deep(.add-btn .el-input__wrapper) {
    background-color: rgb(0,152,131);
  }
  :deep(.search .el-input__inner) {
    color: white
  }

  :deep(.el-input__inner) {
    &::placeholder{
      color: white;
      font-size: 16px
    }
  }

  :deep(.search .el-icon) {
    color: white;
  }

  .table {
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding-top: 50px;
  }

  :deep(.el-table__body) {
    border-collapse: separate;
    border-spacing: 0 20px;
  }

  .el-pagination{
    position: absolute;
    right: 8%;
    bottom: 2%
  }
</style>
